import { createApp } from 'vue';
import VueLazyLoad from 'vue3-lazyload';
import { vLoading } from 'element-plus';
import 'element-plus/theme-chalk/el-loading.css';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import { VueQueryPlugin } from '@tanstack/vue-query';
import 'animate.css';
import mapBoxGl from 'mapbox-gl';
import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
import 'mapbox-gl/dist/mapbox-gl.css';
import 'nprogress/nprogress.css';
import 'virtual:uno.css';
import ImageError from '@/assets/images/img-error.png';
import ImageLoading from '@/assets/images/img-loading.png';
import i18n from '@/locals';
import App from './App.vue';
import './assets/css/index.scss';
import './assets/fonts/font.css';
import directive from './directive';
import router from './routes';
import { pinia } from './stores';

const app = createApp(App);

mapBoxGl.setRTLTextPlugin(
  'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
);
mapBoxGl.accessToken = 'pk.eyJ1IjoiY2hlbjAxMDkiLCJhIjoiY2xubXNjbGZtMWtvaTJqbDhvNmlyenB5eCJ9.bM4BujoTWEIU5f21UMGv2w'; //mapboxToken

app.use(router);
app.use(VueQueryPlugin);
app.use(pinia);
app.use(i18n);
app.directive('loading', vLoading);
app.use(VueLazyLoad, {
  loading: ImageLoading,
  error: ImageError,
});
app.use(directive);
app.mount('#app');
